<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
	<ui:composition template="/template.xhtml">
		<ui:define name="content">
			<p:panel styleClass="layout_2_L" id="pn_left">
				<h:form id="formCalendar">
					<p:calendar value="#{lichDangKyBean.ettLichDangKy.ngayDat}"
						mode="inline" id="inlineCal">
						<p:ajax event="dateSelect"
							listener="#{lichDangKyBean.handleDateSelect}"
							update=":formSchedule:tblLichDangKy :formDlg:tabView:ngayDat" />
					</p:calendar>
				</h:form>
			</p:panel>
			<p:panel styleClass="layout_2_R" id="pn_right">
				<h:form id="formSchedule">
					<p:dataTable var="lichDk"
						value="#{lichDangKyBean.lichDangKyStatusList}" id="tblLichDangKy"
						rowKey="#{lichDk.idTietHoc}"
						selection="#{lichDangKyBean.lichDkSelected}"
						selectionMode="single">
						<f:facet name="header">
							<p:commandButton id="dangKy" value="Đăng ký" onclick="dlg.show()"
								icon="ui-icon-document" actionListener="#{lichDangKyBean.updateTietHoc}" update=":formDlg"/>
							<h:outputText value=" Thông tin đăng ký phòng máy ngày " />
							<h:outputText id="ngayHienThi"
								value="#{lichDangKyBean.ettLichDangKy.ngayDat}"
								styleClass="blue">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</f:facet>
						<p:column headerText="Tiết/Phòng máy"
							style="height: 50px;background-color: #ffff99">
							<h:outputText value="#{lichDk.moTaTietHoc}"
								style="font-weight: bold" />
						</p:column>
						<p:column headerText="Phòng máy 1" styleClass="textCenter">
							<h:outputText
								value="#{lichDangKyBean.convertStatus(lichDk.status1)}" />
						</p:column>
						<p:column headerText="Phòng máy 2" styleClass="textCenter">
							<h:outputText
								value="#{lichDangKyBean.convertStatus(lichDk.status2)}" />
						</p:column>
						<p:column headerText="Phòng máy 3" styleClass="textCenter">
							<h:outputText
								value="#{lichDangKyBean.convertStatus(lichDk.status3)}" />
						</p:column>
						<p:column headerText="Phòng máy 4" styleClass="textCenter">
							<h:outputText
								value="#{lichDangKyBean.convertStatus(lichDk.status4)}" />
						</p:column>
						<p:column headerText="Phòng máy 5" styleClass="textCenter">
							<h:outputText
								value="#{lichDangKyBean.convertStatus(lichDk.status5)}" />
						</p:column>
					</p:dataTable>
				</h:form>
			</p:panel>
			<p:dialog widgetVar="dlg">
				<h:form id="formDlg">
					<p:tabView id="tabView">
						<p:ajax event="tabChange" listener="#{lichDangKyBean.onTabChange}"
							update="tblQueue detail" />
						<p:tab id="tab1" title="Đăng ký phòng máy">
							<h:panelGrid columns="2" cellpadding="10">
								<h:outputText value="Tiêu đề *:" styleClass="textRight" />
								<p:inputText styleClass="txtInput"
									value="#{lichDangKyBean.ettLichDangKy.tieuDe}" />

								<h:outputText value="Ngày đặt *:" styleClass="textRight" />
								<p:calendar value="#{lichDangKyBean.ettLichDangKy.ngayDat}"
									id="ngayDat">
								</p:calendar>

								<h:outputText value="Tiết học *:" styleClass="textRight" />
								<p:selectOneMenu id="cbxTietHoc"
									value="#{lichDangKyBean.ettLichDangKy.idTietHoc}" style="width:156px">
									<f:selectItems value="#{lichDangKyBean.tietHocList}"
										var="tietHoc" itemLabel="#{tietHoc.moTa}"
										itemValue="#{tietHoc.idTietHoc}" />
								</p:selectOneMenu>

								<h:outputText value="Phòng *:" styleClass="textRight" />
								<p:selectOneMenu id="cbxPhongMay"
									value="#{lichDangKyBean.ettLichDangKy.idPhong}" style="width:156px">
									<f:selectItems value="#{lichDangKyBean.phongMayList}"
										var="phongMay" itemLabel="#{phongMay.tenPhongMay}"
										itemValue="#{phongMay.id}" />
								</p:selectOneMenu>

								<h:outputText value="Mô tả:" styleClass="textRight" />
								<p:inputTextarea rows="3" autoResize="false"
									styleClass="txtInput"
									value="#{lichDangKyBean.ettLichDangKy.moTa}" maxlength="200" />

								<h:outputText value="Yêu cầu:" styleClass="textRight" />
								<p:inputTextarea rows="3" autoResize="false"
									styleClass="txtInput"
									value="#{lichDangKyBean.ettLichDangKy.yeuCau}" maxlength="200" />

								<h:outputText value="Email lớp:" styleClass="textRight" />
								<p:inputText styleClass="txtInput"
									value="#{lichDangKyBean.ettLichDangKy.emailLop}"
									validatorMessage="Sai định dạng email">
									<f:validateRegex
										pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />

								</p:inputText>


								<p:commandButton id="cmdSave" value="Lưu" icon="ui-icon-check"
									widgetVar="btnSave"
									actionListener="#{lichDangKyBean.addLichDangKy}"
									update=":menubar:growl :formSchedule:tblLichDangKy tabView" />
								<p:commandButton value="Nhập lại" icon="ui-icon-refresh"
									type="reset" />

							</h:panelGrid>
						</p:tab>

						<p:tab id="tab2" title="Danh sách chờ phê duyệt">
							<p:dataTable id="tblQueue" rowIndexVar="rowIndex" var="dsCho"
								value="#{lichDangKyBean.dsChoList}">
								<f:facet name="header">
									<h:outputText value="Thông tin đăng ký: " />
									<h:outputText
										value="#{lichDangKyBean.phongMaySelected.tenPhongMay}"
										id="phongMay" styleClass="blue" />
									<h:outputText value=" - #{lichDangKyBean.tietHocSelected.moTa}"
										id="tietHoc" styleClass="blue" />
									<h:outputText value=" Ngày: " />
									<h:outputText value="#{lichDangKyBean.ettLichDangKy.ngayDat}"
										id="ngayDat" styleClass="blue">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
								</f:facet>
								<p:column headerText="STT" styleClass="textCenter">
									<h:outputText value="#{rowIndex+1}" />
								</p:column>
								<p:column headerText="Giáo viên">
									<h:outputText value="#{dsCho.tenGiaoVien}" />
								</p:column>
								<p:column headerText="Tiêu đề">
									<h:outputText value="#{dsCho.tieuDe}" />
								</p:column>
								<p:column headerText="Mô tả">
									<h:outputText value="#{dsCho.moTa}" />
								</p:column>
								<p:column headerText="Trạng thái" styleClass="textCenter">
									<h:outputText
										value="#{lichDangKyBean.convertStatus(dsCho.status)}" />
								</p:column>
								<p:column headerText="Hủy đăng ký" styleClass="textCenter">
									<p:commandButton
										actionListener="#{lichDangKyBean.huyDangKy(dsCho.id)}"
										update=":menubar:growl :formDlg :formSchedule:tblLichDangKy"
										icon="ui-icon-trash">
										<p:confirm header="Xác nhận" message="Chắc chắn hủy đăng ký?"
											icon="ui-icon-alert" />
									</p:commandButton>
									<p:confirmDialog global="true" showEffect="fade"
										hideEffect="fade">
										<p:commandButton value="Đồng ý" type="button"
											styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
										<p:commandButton value="Hủy" type="button"
											styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
									</p:confirmDialog>
								</p:column>
							</p:dataTable>
						</p:tab>

						<p:tab id="tab3" title="Thông tin chi tiết phòng máy">
							<p:panel id="detail"
								header="Thông tin #{lichDangKyBean.phongMaySelected.tenPhongMay}"
								footer="#{lichDangKyBean.phongMaySelected.moTa}">
								<h:outputText
									value="Số máy tính: #{lichDangKyBean.phongMaySelected.soMayTinh}" />
							</p:panel>
						</p:tab>
					</p:tabView>
				</h:form>
			</p:dialog>
		</ui:define>
	</ui:composition>
</h:body>
</html>